<template>
    <div class="comments-box w">
        <div class="comment-banner">
            <img src="../../assets/images/mvcommentsBanner.jpg" alt="" />
        </div>
        <div class="comment-input">
            <div class="top-title">
                <div class="title-left">
                    <h4>用户评论</h4>
                </div>
                <div class="title-right">
                    <span>共{{ mvCommentData.total }}条评论</span>
                </div>
            </div>
            <div class="input-box">
                <textarea
                    rows="3"
                    cols="20"
                    placeholder="快来评论你看视频的感受吧！"
                >
                </textarea>
            </div>
            <div class="submit-btn">
                <el-button> 提交评论 </el-button>
            </div>
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="热门评论" name="first">
                <div class="hot-comments">
                    <div class="hot-comments-title">
                        <h4>热门评论</h4>
                    </div>
                    <div class="hot-comments-box">
                        <div
                            class="hot-comments-item"
                            v-for="item in mvCommentData.hotComments"
                        >
                            <div class="left-hot-comments-box">
                                <div class="img-box">
                                    <img :src="item.user.avatarUrl" alt="" />
                                </div>
                                <div class="user-information">
                                    <div class="user-info">
                                        <div class="user-name">
                                            <span>{{
                                                item.user.nickname
                                            }}</span>
                                            <img
                                                src="../../assets/images/user-ico.png"
                                                alt=""
                                            />
                                            <img
                                                v-show="item.user.vipType"
                                                src="../../assets/images/user-viplogo.png"
                                                alt=""
                                                class="vip-img"
                                            />
                                        </div>
                                        <div class="user-pubulishTime">
                                            {{
                                                dateFormat(
                                                    item.time,
                                                    "YYYY-MM-DD"
                                                )
                                            }}
                                        </div>
                                    </div>
                                    <div class="user-comment">
                                        <p>{{ item.content }}</p>
                                    </div>
                                    <template v-if="item.beReplied.length">
                                        <div class="reply-comment">
                                            <div
                                                class="reply-item"
                                                v-for="elem in item.beReplied"
                                            >
                                                <div class="reply-name">
                                                    {{ elem.user.nickname }}
                                                </div>
                                                <div
                                                    class="reply-content"
                                                    :key="
                                                        elem.beRepliedCommentId
                                                    "
                                                >
                                                    <p>{{ elem.content }}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                </div>
                            </div>
                            <div class="right-dianzan">
                                <i class="fa fa-thumbs-o-up"></i>
                                <span>{{ item.likedCount }}</span>
                                <el-button>回复</el-button>
                            </div>
                        </div>
                    </div>
                </div></el-tab-pane
            >
            <el-tab-pane label="最新评论" name="second">
                <div class="hot-comments">
                    <div class="hot-comments-title">
                        <h4>最新评论</h4>
                    </div>
                    <div class="hot-comments-box">
                        <div
                            class="hot-comments-item"
                            v-for="item in mvCommentData.comments"
                        >
                            <div class="left-hot-comments-box">
                                <div class="img-box">
                                    <img :src="item.user.avatarUrl" alt="" />
                                </div>
                                <div class="user-information">
                                    <div class="user-info">
                                        <div class="user-name">
                                            <span>{{
                                                item.user.nickname
                                            }}</span>
                                            <img
                                                src="../../assets/images/user-ico.png"
                                                alt=""
                                            />
                                            <img
                                                v-show="item.user.vipType"
                                                src="../../assets/images/user-viplogo.png"
                                                alt=""
                                                class="vip-img"
                                            />
                                        </div>
                                        <div class="user-pubulishTime">
                                            {{
                                                dateFormat(
                                                    item.time,
                                                    "YYYY-MM-DD"
                                                )
                                            }}
                                        </div>
                                    </div>
                                    <div class="user-comment">
                                        <p>{{ item.content }}</p>
                                    </div>
                                    <template v-if="item.beReplied.length">
                                        <div class="reply-comment">
                                            <div
                                                class="reply-item"
                                                v-for="elem in item.beReplied"
                                            >
                                                <div class="reply-name">
                                                    {{ elem.user.nickname }}
                                                </div>
                                                <div
                                                    class="reply-content"
                                                    :key="
                                                        elem.beRepliedCommentId
                                                    "
                                                >
                                                    <p>{{ elem.content }}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                </div>
                            </div>
                            <div class="right-dianzan">
                                <i class="fa fa-thumbs-o-up"></i>
                                <span>{{ item.likedCount }}</span>
                                <el-button>回复</el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import { lazyload, formatTime, debounce, dateFormat } from "../../utils/common";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
    "mvDetails"
);
import "../../utils/font-awesome-4.7.0/css/font-awesome.min.css";

export default {
    data() {
        return {
            activeName: "first",
        };
    },
    computed: {
        ...mapState(["mvCommentData"]),
    },
    created() {
        this.dateFormat = dateFormat;
        this.getMvComments(this.$route.params._id);
    },
    methods: {
        ...mapActions(["getMvComments"]),
        ...mapMutations([""]),
        handleClick(tab, event) {},
    },
};
</script>


<style lang='scss' scoped>
@import "../../assets/sass/mvDetails/mvComments.scss";
</style>